<script setup lang="ts">
import { ref, watchEffect,computed,watch } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "../utils/rule";
import { FormProps } from "../utils/types";
import { usePublicHooks } from "../../hooks";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    title: "新增",
    higherDeptOptions: [],
    range_type: 1,
    view_name: "",
    view_type: "",
    range_ids: [],
    fields: [],
    status: 1,viewList:[],userList:[],roleList:[],fieldList:[]
  })
});
const ruleFormRef = ref();
const { switchStyle } = usePublicHooks();
const newFormInline = ref(props.formInline);

watch(newFormInline.view_name, val => {
  if(newFormInline.value.fields.length==0){
    newFormInline.fields = props.formInline.fieldList.filter(x=>(x.table_name == val &&x.field_disable==2 &&x.field_default==1)).map(x=>x.field_name)
  }
});
function getRef() {
  return ruleFormRef.value;
}

watchEffect( () => {
  console.log('Selected value changed:',newFormInline,newFormInline.range_type);
});
defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="82px"
  >
    <el-row :gutter="30">
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="视图名称" prop="view_name">
          <el-input
            v-model="newFormInline.view_name"
            clearable
            placeholder="请输入视图名称"
          />
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="视图分类">
          <el-select
            v-model="newFormInline.view_type"
            placeholder="请选择视图分类" class="w-full" clearable>
            <el-option v-for="(item, index) in newFormInline.viewList" :key="index":label="item.label" :value="item.id"/>
          </el-select>

        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="可见范围">
          <el-radio-group v-model="newFormInline.range_type" @change="newFormInline.range_ids=[]">
            <el-radio value=1>指定成员</el-radio>
            <el-radio value=2>指定角色</el-radio>
          </el-radio-group>
          <el-select v-model="newFormInline.range_ids"
            :placeholder="newFormInline.range_type==1?'请选择成员列表':'请选择角色列表'" class="w-full" clearable multiple>
            <el-option v-if="newFormInline.range_type==1" v-for="(item, index) in newFormInline.userList"
                       :key="index" :label="item.username" :value="item.id"/>
            <el-option v-if="newFormInline.range_type==2" v-for="(item, index) in newFormInline.roleList"
                       :key="index" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>

      </re-col>

      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="显示字段" prop="fields">
          <el-checkbox-group v-model="newFormInline.fields">
            <el-checkbox :label="item.field_comment" :value="item.field_name" :disabled="item.field_disable==2"  v-for="item in props.formInline.fieldList.filter(x=>(x.table_name == newFormInline.view_type))" />
          </el-checkbox-group>

<!--          <re-col :value="24" :xs="24" :sm="24">-->
<!--            <b>基础字段</b>-->
<!--          </re-col>-->

<!--            <el-checkbox-group v-model="newFormInline.fields">-->
<!--              <el-checkbox :label="item.field_comment" :value="item.field_name" :disabled="item.field_disable==2"  v-for="item in props.formInline.fieldList.filter(x=>(x.table_name == newFormInline.view_type && x.field_type==1))" />-->
<!--            </el-checkbox-group>-->

<!--          <re-col :value="24" :xs="24" :sm="24">-->
<!--            <b>人员与时间字段</b>-->
<!--          </re-col>-->
<!--          <el-checkbox-group v-model="newFormInline.fields">-->
<!--            <el-checkbox :label="item.field_comment" :value="item.field_name" :disabled="item.field_disable==2"  v-for="item in props.formInline.fieldList.filter(x=>(x.table_name == newFormInline.view_type && x.field_type==2))" />-->
<!--          </el-checkbox-group>-->
<!--          <re-col :value="24" :xs="24" :sm="24">-->
<!--            <b>自定义字段</b>-->
<!--          </re-col>-->
<!--          <el-checkbox-group v-model="newFormInline.fields">-->
<!--            <el-checkbox :label="item.field_comment" :value="item.field_name" :disabled="item.field_disable==2"  v-for="item in props.formInline.fieldList.filter(x=>(x.table_name == newFormInline.view_type && x.field_type==3))" />-->
<!--          </el-checkbox-group>-->
        </el-form-item>
      </re-col>



      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="状态">
          <el-switch
            v-model="newFormInline.status"
            inline-prompt
            :active-value="1"
            :inactive-value="0"
            active-text="启用"
            inactive-text="停用"
            :style="switchStyle"
          />
        </el-form-item>
      </re-col>

    </el-row>
  </el-form>
</template>
